:root {
  --gray: #777;
  --dark-gray: #444;
  --very-dark-gray: #222;
  --light-sea-blue: #59a6ff;
  --sea-blue: #316fd3;
  --dark-sea-blue: #2655b9;
  --sand-yellow: #f3ec86;
}

body {
  background-color: white;
  color: var(--dark-gray);
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  color: var(--very-dark-gray);
}
a {
  color: var(--sea-blue);
}
input {
  border: 2px solid var(--very-dark-gray);
  transition: all 0.08s ease-in-out;
}
input:focus {
  /*box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);*/
  outline: 0px;
}
nav {
  background-image: linear-gradient(
    135deg,
    var(--sea-blue) 0%,
    var(--sea-blue) 55%,
    var(--light-sea-blue) 55%,
    var(--light-sea-blue) 70%,
    var(--sand-yellow) 70%,
    var(--sand-yellow) 100%
  );
  color: white;
}
blockquote {
  border: solid var(--gray);
  color: var(--very-dark-gray);
}
footer {
  opacity: 0.9;
}
span.badge {
  background-color: var(--sea-blue);
}
